<template>
  <div>
    <!-- 树形 -->
    <!-- <el-tree
  :data="data"
   :props="defaultProps"
  show-checkbox
  node-key="id"
  ref="tree"
  highlight-current
  class="stafftree"
  @check="handleCheckChange"
 >
</el-tree> -->

    <ul>
      <li v-for="item in data1.childs" :key="item.id" @click="trrCl(item, 1)"><i v-if="item.is_must == 1" style="color: red; margin-right: 5px">*</i>{{ item.name }}</li>
    </ul>

    <ul v-if="data2.childs">
      <li v-for="item in data2.childs" :key="item.id" @click="data2.is_label == 0 ? trrCl(item, 2) : getvalue(item)">
        {{ item.name }}
      </li>
    </ul>

    <ul v-if="data3.childs">
      <li v-for="item in data3.childs" :key="item.id" @click="data3.is_label == 0 ? trrCl(item, 3) : getvalue(item)">
        {{ item.name }}
      </li>
    </ul>

    <ul v-if="data4.childs">
      <li v-for="item in data4.childs" :key="item.id" @click="getvalue(item)">{{ item.name }}</li>
    </ul>

    <h2 v-if="dataList.length">已选择</h2>
    <ul>
      <li v-for="(item, index) in dataList" :key="item.id" class="choose">{{ item.name }} <i class="el-icon-circle-close" @click="Delchoose(index)"></i></li>
    </ul>
    <div class="buttons">
      <el-button size="mini" @click="cancel">取消</el-button>
      <el-button size="mini" @click="getCheckedKeys" type="primary">确定</el-button>
    </div>
  </div>
</template>
<script>
import {
  father_label_list, // tree数据
  company_label_add, //数据添加
  company_labels, //标签选择数据回显
  company_label_level,
} from '@/api/customer'

export default {
  data() {
    return {
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      dataList: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      checkedKeys: [], // 存储已选中的节点的 key 值
    }
  },

  mounted() {
    this.treeData()
    company_labels({ id: this.$route.query.id }).then((res) => {
      this.dataList = res.data
    })
    // father_label_list({name:''}).then(res=>{
    //   this.setDisabled(res.data.data)
    //     this.data=res.data.data
    // })
  },
  methods: {
    // 取消
    cancel() {
      this.$emit('cancel')
    },

    // 提交
    getCheckedKeys() {
      //  if( this.dataList.length<=0)   return this.$message.error('标签组未选择！');
      this.checkedKeys = []
      this.dataList.map((key) => {
        this.checkedKeys.push(key.id)
      })
      if (this.checkedKeys.length == 0) return this.$message.error('请至少选择一个')
      company_label_add({
        id: this.$route.query.id,
        label_ids: this.checkedKeys,
      }).then((res) => {
        if (res.code == 200) {
          this.$emit('cancel', this.checkedKeys)
          console.log(res)
        }
      })
    },

    getvalue(item) {
      this.dataList.push(item)
      this.dataList = this.deWeightThree()
    },

    trrCl(e, num) {
      this.treeData(e, num)
    },
    treeData(e, num) {
      var data = {}
      if (e != undefined && num != undefined) {
        data.cate_id = e.id
        data.level = num
      }
      company_label_level(data).then((res) => {
        if (res.code == 200) {
          if (num == 1) {
            this.data2 = []
            this.data3 = []
            this.data4 = []
            if (res.data.is_label) {
              this.data4 = res.data
            } else {
              this.data2 = res.data
            }
          } else if (num == 2) {
            this.data3 = []
            this.data4 = []
            if (res.data.is_label) {
              this.data4 = res.data
            } else {
              this.data3 = res.data
            }
          } else if (num == 3) {
            this.data4 = []
            if (res.data.is_label) {
              this.data4 = res.data
            } else {
              this.data3 = res.data
            }
          } else {
            this.data2 = []
            this.data3 = []
            this.data4 = []
            this.data1 = res.data
          }
        } else {
          this.$emit('cancel')
        }
      })
    },

    // 删除已选择选择
    Delchoose(id) {
      console.log(id)
      this.dataList.splice(id, 1)
    },
    // handleCheckChange(node){
    //     company_labels({id:node.id}).then(res=>{
    //        console.log(res)
    //     })
    //     if(this.checkedKeys.indexOf(node.id)==-1){
    //       this.checkedKeys.push(node.id)
    //     }else{
    //        this.checkedKeys.splice(this.checkedKeys.indexOf(node.id),1)
    //     }

    // },
    // // 清除复选框按钮
    // setDisabled(treeData) {
    //       if (treeData) {
    //           treeData.forEach(item => {

    //               if (item.children) {
    //                 if(item.children==undefined || item.children.length==0){
    //                     item.disabled = false
    //                 }else{
    //                    item.disabled = true
    //                 }
    //                   this.setDisabled(item.children)
    //               }

    //           })
    //       }

    //   },

    // 去重
    deWeightThree() {
      let map = new Map()
      for (let item of this.dataList) {
        if (!map.has(item.id)) {
          map.set(item.id, item)
        }
      }
      return [...map.values()]
    },
  },
}
</script>

<style lang="scss" scoped>
.buttons {
  margin-top: 20px;
  text-align: center;
}
::v-deep .stafftree {
  // 不可全选样式
  .el-tree-node {
    .el-checkbox__input.is-disabled {
      display: none;
    }
  }
}
ul {
  width: 100%;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
li {
  border: 1px solid #ccc;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
  margin-bottom: 10px;
}
.choose {
  position: relative;
}
.choose i {
  position: absolute;
  right: -5px;
  top: -7px;
  background: #fff;
}
</style>
